<template>
	<view class="page-content">
		<f-navbar title="详情"></f-navbar>
		<view v-if="policeInfo">
			<view class="header-box flex align-center" :style="{
				'background-image': navBg(policeInfo.status,policeInfo.processingResults),
			  }">
				<view class="flex align-start">
					<u-icon name="checkmark-circle" color="#ffffff" size="40rpx" bold></u-icon>
					<view class="header-right" >
						<view class="title">{{policeInfo.status==0 || policeInfo.processingResults==0?'待处理':'已处理'}}</view>
						<view>当前报警信息{{policeInfo.status==0 || policeInfo.processingResults==0?'待处理':'已处理'}}</view>
					</view>
				</view>
			</view>
			<view class="content-box">
				<view class="title-box">报警信息</view>
				<view class="info-box">
					<view class="info-item">
						<view class="item-label">报警类型：</view>
						<view class="item-value">{{getDictionaryName(policeTypeOptions,policeInfo.alarmType)}}</view>
					</view>
					<view class="info-item">
						<view class="item-label">车牌号：</view>
						<view class="item-value">{{policeInfo.receivingVehicle}}</view>
					</view>
					<view class="info-item">
						<view class="item-label">报警地点：</view>
						<view class="item-value">{{policeInfo.alarmPlace}}</view>
					</view>
					<template v-if="policeInfo.status==1">
						<view class="info-item">
							<view class="item-label">处理人：</view>
							<view class="item-value">{{policeInfo.updateName}}</view>
						</view>
						<view class="info-item">
							<view class="item-label">处理时间：</view>
							<view class="item-value">{{policeInfo.updateTime}}</view>
						</view>
						<view class="info-item" v-if="policeInfo.status==1">
							<view class="item-label">处理结果：</view>
							<!--processingResults 处理状态 0未处理1同意2驳回 -->
							<view class="item-value color1"  v-if="policeInfo.processingResults==0">已申请消错，待处理</view>
							<view class="item-value color2"  v-if="policeInfo.processingResults==2">消错驳回</view>
							<view class="item-value color3"  v-if="policeInfo.processingResults==1">消错通过</view>
						</view>
						<view class="info-item" v-if="policeInfo.status==1">
							<view class="item-label">处理描述：</view>
							<view class="item-value">{{policeInfo.remark}}</view>
						</view>
					</template>
				</view>
			</view>
		</view>

	</view>
</template>
<script>
	export default {
		components: {

		},
		data() {
			return {
				pageData: {},
				policeInfo: null,
				policeTypeOptions:[],//报警类型
			};
		},
		computed: {
			navBg() {
				return (state,processingResults) => {
					console.log(state);
					if (state == 0 || processingResults==0) {
						return "url('/static/images/common/icon_cancel_bg.png')";
					} else if (state == 1) {
						return "url('/static/images/common/icon_done_bg.png')";
					}
				};
			},
		},
		onPageScroll(e) {

		},
		onReady() {

		},
		onShow() {

		},
		onLoad(option) {
			this.pageData = this.deCodeUrl(option.param)
			this.getData()
			this.getDictData();
		},
		methods: {
			async getDictData() {
				// getDictionaryName(policeTypeOptions,item.alarmType)
				this.policeTypeOptions = await this.getDictionaryData('police_type');
			},
			getData() {
				this.policeInfo = this.pageData;
				console.log(this.policeInfo);
			},
			
			
		},

	};
</script>
<style lang="scss" scoped>
	.page-content {
		.header-box {
			margin-top: 32rpx;
			height: 163rpx;
			background: linear-gradient(83deg, #48B453 0%, #2C9F79 100%);
			background-image: url('@/static/images/common/police_bg.png');
			background-size: 100% 100%;
			padding: 0 34rpx;

			.header-right {
				font-size: 26rpx;
				color: #FFFFFF;
				margin-left: 24rpx;

				.title {
					font-weight: bold;
					font-size: 36rpx;
					line-height: 40rpx;
					margin-bottom: 12rpx;
				}
			}
		}

		.content-box {
			padding: 32rpx;

			.title-box {
				font-size: 32rpx;
				font-weight: bold;
			}

			.info-box {
				padding: 0 32rpx;
				margin-top: 24rpx;
				background: #FFFFFF;
				border-radius: 16rpx;

				.info-item {
					padding: 32rpx 0;
					border-bottom: 1rpx solid #EFEFEF;
					font-size: 30rpx;
					display: flex;
					align-items: flex-start;
					line-height: 36rpx;

					&:last-child {
						border: none;
					}

					.item-label {
						color: #666668;
					}

					.item-value {
						color: #000000;
						flex: 1;
					}
					.color1 {
						color: #FC880C;
					}
					
					.color2 {
						color: #DF0E0E;
					}
					.color3 {
						color: #138E57;
					}
				}
			}
		}
	}
</style>